<template>
  <div class="activities-center">
    <!-- 动态内容区域 -->
    <div class="content-area">
      <!-- 页面标题 -->
      <div class="page-header">
        <h1 class="page-title">
          <el-icon><Calendar /></el-icon> 活动中心
        </h1>
      </div>

      <!-- 按钮式选项卡 -->
      <div class="button-tabs">
        <el-button
            v-for="tab in tabs"
            :key="tab.value"
            :type="activeTab === tab.value ? 'primary' : ''"
            @click="changeTab(tab.value)"
            class="tab-button"
        >
          {{ tab.label }}
        </el-button>
      </div>
      <component :is="currentComponent" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, shallowRef, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Calendar } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

// 导入活动组件
import LaborCheckIn from './components/LaborCheckIn.vue';
import LaborWeek from './components/LaborWeek.vue';
import Practice from './components/Practice.vue';
import ThemeEducation from './components/ThemeEducation.vue';
import Questionnaire from './components/Questionnaire.vue';
import SpecialActivities from './components/SpecialActivities.vue';

const route = useRoute();
const router = useRouter();

// 选项卡定义
const tabs = ref([
  { label: '实践足迹', value: 'practice-footprint', component: LaborCheckIn },
  { label: '劳动周', value: 'labor-week', component: LaborWeek },
  { label: '综合实践活动', value: 'comprehensive-practice', component: Practice },
  { label: '主题教育活动', value: 'theme-education', component: ThemeEducation },
  { label: '问卷调查', value: 'questionnaire', component: Questionnaire },
  { label: '特色活动', value: 'special-activities', component: SpecialActivities }
]);

// 当前激活的选项卡
const activeTab = ref('practice-footprint');

// 当前组件 (使用shallowRef优化性能)
const currentComponent = shallowRef(LaborCheckIn);

// 从URL参数获取tab值
const getTabFromQuery = () => {
  const type = route.query.type;
  // 映射type到对应的tab值
  const typeMapping: Record<string, string> = {
    'checkin': 'practice-footprint',
    'survey': 'questionnaire',
    'activity': 'special-activities'
  };

  if (type && typeMapping[type as string]) {
    return typeMapping[type as string];
  }
  return 'practice-footprint'; // 默认值
};

// 切换选项卡
const changeTab = (tab: string) => {
  activeTab.value = tab;
  const tabConfig = tabs.value.find(t => t.value === tab);
  if (tabConfig) {
    currentComponent.value = tabConfig.component;
  }

  // 更新URL参数（如果需要）
  router.replace({
    query: {
      ...route.query,
      type: getTypeFromTab(tab)
    }
  });
};

// 反向映射：从tab值获取type参数
const getTypeFromTab = (tab: string): string | undefined => {
  const tabMapping: Record<string, string> = {
    'practice-footprint': 'checkin',
    'questionnaire': 'survey',
    'special-activities': 'activity'
  };
  return tabMapping[tab];
};

import {fetchCategories} from "@/api/teacher";

const loadData = async () => {
  try {
    const res = await fetchCategories();
    // tabs.value  = res.data
  } catch (err) {
    ElMessage.error('加载录音数据失败:', err);
  }
};

// 监听路由变化，同步activeTab
watch(() => route.query.type, (newType) => {
  if (newType) {
    const typeMapping: Record<string, string> = {
      'checkin': 'practice-footprint',
      'survey': 'questionnaire',
      'activity': 'special-activities'
    };

    if (typeMapping[newType as string]) {
      changeTab(typeMapping[newType as string]);
    }
  }
});

// 组件挂载时加载数据
onMounted(() => {
  loadData();

  // 初始化时根据URL参数设置activeTab
  const tabFromQuery = getTabFromQuery();
  if (tabFromQuery !== activeTab.value) {
    changeTab(tabFromQuery);
  }
});
</script>

<style scoped>
/* 样式部分保持不变 */
.activities-center {
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 22px;
  font-weight: 600;
  color: #1e62ec;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* 按钮式选项卡样式 */
.button-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.button-tabs .el-button {
  border-radius: 16px;
  padding: 8px 20px;
  transition: all 0.3s;
}

/* 内容区域 */
.content-area {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 20px;
  overflow-y: auto;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .button-tabs {
    gap: 8px;
  }

  .button-tabs .el-button {
    padding: 6px 15px;
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .activities-center {
    padding: 10px;
  }

  .page-title {
    font-size: 20px;
  }

  .button-tabs {
    gap: 5px;
  }

  .content-area {
    padding: 15px;
  }
}
</style>
